<template>
  <div class="page">
    <div class="flex-grow space-y-3">
      <div class="flex flex-col space-y-3">
        <div>
          <textarea class="w-full h-24 p-3 box-border" v-model="text"> </textarea>
        </div>
        <div class="flex">
          请菩萨以
          <Select @select="select"> </Select>
          开示
        </div>
      </div>
      <div class="p-3" v-if="finish">
        <div>
          <div>{{ no }}把
            <span v-for="(it, key) of turn" :key="key">
              {{ sum(it) }} &nbsp;
            </span>
            {{ sumTotal }} {{ result }}
          </div>
          <div class="text-xs mt-3">{{ resultDesc }}</div>
        </div>
      </div>
      <div v-else>
        <div>第 {{ no }} 把 </div>
        <div class="grid grid-cols-3 gap-3 text-center">
          <div class="box-border p-8 text-3xl font-bold" :class="{
            'bg-gray-1': index == key,
          }" v-for="(it, key) of turn" :key="key" @click="onTurnClick(key)">
            {{ sum(it) }}
          </div>
        </div>
      </div>
    </div>
    <div @click="changeMode">计算模式:{{ keyType == 1 ? '自动' : '手动' }}</div>
    <!-- 自动计算 -->
    <div v-if="keyType == 1">
      <div class="grid grid-cols-3">
        <template v-for="n in 18" :key="n">
          <div @click="onKeyClick(n)" class="key h-18" :class="{
            active: isActive(n),
          }">
            {{ HanMap(n) }}
          </div>
        </template>
      </div>
      <div class="h-12 leading-12 text-center bg-green-1" @click="next">
        {{ finish ? '此次占察结束，开启下次占察' : '确认' }}
      </div>
    </div>
    <!-- 自主计算 -->
    <div v-if="keyType == 2">
      <div class="text-center leading-30px bg-gray-50 text-lg">
        {{ turnNum }}
      </div>
      <div class="grid grid-cols-3 text-lg">
        <template v-for="n in 9" :key="n">
          <div @click="onKeyClick2(n)" class="key h-24">
            {{ n }}
          </div>
        </template>
        <div class="key h-24" @click="onKeyClick2(-1)">撤销</div>
        <div class="key h-24" @click="onKeyClick2(0)">0</div>
        <div class="key h-24" @click="next">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import lx from '/public/lx.json';
import { useHistoryStore } from '@/stores/history';
import { HanMap } from '@/utils/index';
import { v4 as uuidv4 } from 'uuid';

const history = useHistoryStore();

const keyType = ref(2);
const turnNum = ref('');

const no = ref(1);
const turn = ref([[], [], []]);
const targetRange = ref([]);
const index = ref(0);
const actions = ref([]);
const finish = ref(false);
const text = ref('');
const result = ref('');
const resultDesc = ref('');

const init = () => {
  no.value = 1;
  finish.value = false;
  turn.value = [[], [], []];
  targetRange.value = [];
  index.value = 0;
  actions.value = [];
  text.value = '';
  result.value = '';
  resultDesc.value = '';
};

const onTurnClick = key => {
  if (key != index.value) {
    saveActions();
    turnNum.value = '';
    index.value = key;
    actions.value = turn.value[key];
  }
};

const saveActions = () => {
  turn.value[index.value] = actions.value;
};

const changeMode = () => {
  keyType.value = keyType.value == 1 ? 2 : 1;
};

const onKeyClick = no => {
  if (finish.value) {
    return;
  }
  if (targetRange.value.length == 0) {
    alert('请先选择轮相组');
    return;
  }
  let mod = no % 3;
  if (isKeyActive(no)) {
    actions.value = actions.value.filter(e => !(e == no));
  } else {
    if (mod == 0) {
      actions.value = actions.value.filter(e => !(e == no - 1 || e == no - 2));
      actions.value.push(no);
    } else if (mod == 1) {
      actions.value = actions.value.filter(e => !(e == no + 1 || e == no + 2));
      actions.value.push(no);
    } else if (mod == 2) {
      actions.value = actions.value.filter(e => !(e == no - 1 || e == no + 1));
      actions.value.push(no);
    }
  }
  saveActions();
};

const onKeyClick2 = no => {
  if (finish.value) {
    return;
  }
  if (targetRange.value.length == 0) {
    alert('请先选择轮相组');
    return;
  }
  if (no < 0) {
    if (turnNum.value.length == 1) {
      turnNum.value = '';
    } else {
      turnNum.value = turnNum.value.slice(0, -1);
    }
  } else {
    turnNum.value = turnNum.value + String(no);
  }
  actions.value[0] = parseInt(turnNum.value || '0');
};

const isKeyActive = e => actions.value.includes(e);

const isActive = computed(() => {
  return isKeyActive;
});

const sum = computed(() => {
  return e => e.reduce((a, b) => a + b, 0);
});
const sumTotal = computed(() => {
  let result = 0;
  for (let list of turn.value) {
    result += list.reduce((a, b) => a + b, 0);
  }
  return result;
});

const next = () => {
  if (finish.value) {
    init();
    return;
  }
  if (index.value < 2) {
    onTurnClick(index.value + 1);
  } else {
    if (targetRange.value.includes(sumTotal.value)) {
      turnNum.value = '';
      finish.value = true;
      let targetLx = lx.find(e => e.id == sumTotal.value);
      result.value = targetLx.name;
      resultDesc.value = targetLx.desc;
      let turnNum1 = sum.value(turn.value[0])
      let turnNum2 = sum.value(turn.value[1])
      let turnNum3 = sum.value(turn.value[2])
      let total = turnNum1 + turnNum2 + turnNum3
      history.append({
        text: text.value,
        no: no.value,
        turn: turn.value,
        turnTotal: total,
        turnNum1,
        turnNum2,
        turnNum3,
        targetRange: targetRange.value,
        result: result.value,
        resultDesc: resultDesc.value,
        keyType: keyType.value,
        timestamp: new Date().getTime(),
        uuid: uuidv4(),
      });
    } else {
      no.value += 1;
      index.value = 0;
      turn.value = [[], [], []];
      actions.value = [];
      turnNum.value = '';
    }
  }
};

const select = g => {
  targetRange.value = g.items;
};
</script>

<style scoped>
.page {
  @apply w-screen h-screen flex flex-col box-border overflow-hidden;
}

.active {
  @apply !bg-green-200 text-green-7;
}

.key {
  @apply flex items-center justify-center bg-gray-50 border border-white border-solid hover:(bg-green-50);
}
</style>
